<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">      
 
    <h:head>
       
    </h:head>
<h:body>
	<ui:composition template="/PageTemplate.xhtml">

	<ui:define name="center">
		<p:layoutUnit position="center" header="OrderList Demo">
     	<h:form>
		   	<p:panel id="persons">
		   	<p>This demo explains how an Xpert.ivy List can be used as data for an order list widget.</p>

<!--    		  		<p:orderList value="#{data.categories}" var="category" iconOnly="true" effect="clip"   -->
<!-- 	        	             id="categoryList" controlsLocation="right">            	 -->
<!-- 	          		<f:facet name="caption">Category</f:facet> -->
<!-- 	          		<p:column> #{category}</p:column>  -->
<!-- 	 			</p:orderList> -->
	 			
	 			<p:orderList value="#{data.categories}" var="category" iconOnly="true" effect="clip"  
	        	            itemValue="#{category}" converter="ivy.ListItem" id="personsList" controlsLocation="right">            	
	          		<f:facet name="caption">Category</f:facet>
	          		<p:column>#{category}</p:column> 
	 			</p:orderList>  
	 			
	 			  
	 			<br/>
<!-- 	 	itemValue="#{category}" converter="ivy.ListItem"		<p:commandButton actionListener="#{logic.send}" value="Send" update="persons"/> -->
	 			<br/>
	 			<br/>
<!-- 	 			<h:outputText value="Persons: #{data.persons}"/> -->
	   		</p:panel>   		
   		</h:form>
		</p:layoutUnit>
	</ui:define>

	</ui:composition>
</h:body>
</html>